<template>
  <div class="role">
    <n-form label-placement="left" :model="formData">
      <n-row :gutter="24">
        <n-col :span="6">
          <n-form-item label="角色名称">
            <n-input
                placeholder="角色名称"
                v-model:value="formData.roleName"
            ></n-input>
          </n-form-item>
        </n-col>
        <n-col :span="6">
          <n-form-item>
            <n-space>
              <n-button type="info" @click="handleSearch">查询</n-button>
              <n-button type="default" @click="handleReset">重置</n-button>
            </n-space>
          </n-form-item>
        </n-col>
      </n-row>
    </n-form>
    <div class="role_btn">
      <n-space>
        <n-button type="info" @click="handleAdd">添加</n-button>
      </n-space>
    </div>
    <div class="role_table">
      <n-data-table
          size="small"
          :pagination="pagination"
          :row-key="rowKey"
          :data="list"
          remote
          :columns="columns"
      ></n-data-table>
    </div>
    <RoleModal ref="modal" @list="getList"></RoleModal>
    <RoleUserModal ref="user"></RoleUserModal>
    <RoleMenuModal ref="menu"></RoleMenuModal>
  </div>
</template>

<script lang="ts">
export default {
  name: "role"
}
</script>

<script setup lang="ts">
import {onMounted, reactive, h, ref} from "vue"
import {
  ums_role_delete,
  ums_role_list, ums_role_menuList,
  ums_role_status,
  ums_role_userList
} from '@/api/ums'
import {RoleListType, roleColumns, RoleFormDateType} from '@/view/system/role/RoleType'
import useSystem from '@/hooks/useSystem'
import {NSwitch} from 'naive-ui'
import RoleListOperate from '@/view/system/role/RoleListOperate.vue'
import RoleModal from '@/view/system/role/RoleModal.vue'
import RoleUserModal from '@/view/system/role/RoleUserModal.vue'
import RoleMenuModal from '@/view/system/role/RoleMenuModal.vue'
import {UserType} from '@/type/ums'

const rowKey = (row:RoleListType) => row.roleId

const {pagination, success, list, error} = useSystem<RoleListType[]>()

const modal = ref<{
  init: (data?: RoleListType) => void
}>()

const user = ref<{
  init: (list: UserType[], row: RoleListType) => void
}>()

const menu = ref<{
  init: (list: string[], row: RoleListType) => void
}>()

const formData = reactive<RoleFormDateType>({
  roleName: ''
})

const columns = [].concat(roleColumns, [
  {
    title: "状态",
    key: "status",
    align: 'center',
    render(row:RoleListType) {
      if (row.roleId === '1' && row.roleName === '超级管理员') {
        if (row.status === 0) {
          return '禁用'
        }
        if (row.status === 1) {
          return '启用'
        }
        return row.status
      }
      return h(NSwitch, {
        checkedValue: 1,
        uncheckedValue: 0,
        value: row.status,
        onUpdateValue:(value: 0|1) => {
          ums_role_status({
            roleId: row.roleId,
            status:value
          }).then(res => {
            if (res.code === 200) {
              success(res.message)
              getList()
            }else {
              error(res.message)
            }
          })
        }
      })
    }
  },
  {
    title: "操作",
    key: "id",
    align: 'center',
    width: 400,
    render(row: RoleListType) {
      // if (row.roleId === '1' && row.roleName === '超级管理员') {
      //   return ''
      // }
      return h(RoleListOperate, {
        status: row.status,
        roleId: row.roleId,
        onEdit(){
          modal.value?.init(row)
        },
        onDelete() {
          ums_role_delete({roleId: row.roleId}).then(res => {
            if (res.code === 200) {
              success(res.message)
              getList()
            }else {
              error(res.message)
            }
          })
        },
        onUser() {
          ums_role_userList({roleId: row.roleId}).then(res => {
            if (res.code === 200) {
              user.value?.init(res.data, row)
            }
          })
        },
        onMenu() {
          ums_role_menuList({roleId: row.roleId}).then(res => {
            if (res.code === 200) {
              menu.value?.init(res.data, row)
            }
          })
        }
      })
    }
  }
])

const handleAdd = () => {
  modal.value?.init()
}

const handleSearch = () => {
  pagination.page = 1
  getList()
}

const handleReset = () => {
  formData.roleName = ''
  pagination.page = 1
  getList()
}

function getList () {
  ums_role_list({
    current: pagination.page,
    pageSize: pagination.pageSize,
    data: formData
  }).then(res => {
    pagination.itemCount = res.data.total
    pagination.pageSize = res.data.pageSize
    pagination.page = res.data.current
    list.value = res.data.list.sort((a, b) => a.role_order - b.role_order)
  })
}

onMounted( () => {
  getList()
} )
</script>

<style scoped lang="scss">
$height: 60px;
.role{
  height: 100%;
  overflow: hidden;
  &_btn{
    height: $height;
    display: flex;
    align-items: center;
  }
  &_table{
    height: calc(100% - $systemHeader - 58px);
    overflow-y: auto;
    overflow-x: hidden;
  }
}
</style>
